<template>
    <Modal title="分享商品库存明细" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" width="900px">
        <div style="margin-bottom: 10px">
            <label style="margin: auto 10px;color: #f00">类型:</label>
            <el-button size="small" @click="searchSource(null)" :type="queryParams.source==null?'success':''">不限</el-button>
            <el-button size="small" @click="searchSource(3)" :type="queryParams.source==3?'success':''">分拣扣除<el-badge :value="changeData.source3"></el-badge></el-button>
            <el-button size="small" @click="searchSource(4)" :type="queryParams.source==4?'success':''">分拣退回<el-badge :value="changeData.source4"></el-badge></el-button>
            <el-button size="small" @click="searchSource(5)" :type="queryParams.source==5?'success':''">虾皮退货/入库<el-badge :value="changeData.source5"></el-badge></el-button>
            <el-button icon="el-icon-refresh" circle @click="refreshData" :loading="dataLoading"></el-button>
        </div>
        <div style="margin-bottom: 10px">
            <label style="margin: auto 10px;color: #f00">发生时间:</label>
            <el-date-picker @change="cbtime" v-model="others.createTime" type="daterange" align="right" unlink-panels range-separator="-" style="width: 220px" :start-placeholder="$t('开始日期')" size="small" value-format="yyyy-MM-dd" :end-placeholder="$t('结束日期')">
            </el-date-picker>
            <el-button @click="search" size="small" type="primary">搜索</el-button>
            <el-button @click="reset" size="small">重置</el-button>
        </div>
        <Table :loading="loading" :columns="columns" :data="storageProductChanges" border>
        </Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
            </div>
        </div>
        <div slot="footer">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" @click="cancel">确定</el-button>
        </div>
    </Modal>
    </Modal>
</template>
<script>
export default {
    name: 'CStorageProduct',
    data() {
        return {

            loading: false,



            queryParams: {
                btime: null,
                toUserId: null,
                etime: null,
                source: null,
                type: null,

            },
            others: {
                createTime: [],
            },


            storageProductChange: {

            },
            dataLoading: false,
            changeData: {
                source1: 0,
                source2: 0,
                source3: 0,
                source4: 0,
                source5: 0,
                source6: 0,
            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            storageProductChanges: [

            ],

            columns: [{
                    title: '时间',
                    key: 'createTime',
                    width: 130,
                    align: 'center',
                    render: (h, params) => {
                        var me = this;
                        return h("div", [
                            h("span", { style: {} }, me.long2datetime(params.row.createTime))
                        ]);
                    }
                }, {
                    title: '变更前',
                    key: 'beforeCount',
                    width: 130,
                    align: 'center'
                }, {
                    title: '变更数量',
                    key: 'count',
                    width: 130,
                    align: 'center'
                }, {
                    title: '变更后',
                    key: 'afterCount',
                    width: 130,
                    align: 'center'
                }, {
                    title: '备注',
                    key: 'remark',
                    align: 'center'
                }

            ]
        };
    },
    props: [
        'productId', 'show'
    ],
    mounted: function() {


    },
    computed: {

    },
    methods: {

        cbtime: function(value) {
            //创建时间
            if (value) {
                this.queryParams.btime = value[0];
                this.queryParams.etime = value[1];
            } else {
                this.queryParams.btime = "";
                this.queryParams.etime = "";
            }

        },
        searchSource: function(source) {
            this.queryParams.source = source;
            this.search();
        },
        searchType: function(type) {
            this.queryParams.type = type;
            this.search();
        },
        refreshData: function() {
            var me = this;
            me.dataLoading = true;
            me.$http.post("/storageproduct/shareChangeStatistics.do", me.queryParams).then(response => {
                me.dataLoading = false;
                var body = response;
                if (body.status == 0) {

                    me.changeData = body.obj;

                }

            }, response => {
                me.dataLoading = false;
            });
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
            this.refreshData();
        },
        reset: function() {
            this.others.createTime = [];
            this.queryParams = {
                toUserId: null,
                btime: null,
                etime: null,
                source: null,
                type: null,
            };
            this.search();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            params.productId = me.productId;
            me.loading = true;
            me.$http.post("/storageproduct/change/getShareList.do", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;
                    me.storageProductChanges = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        },
        showModal: function(val) {
            if (val) {
                this.search();
            } else {
                this.others.createTime = [];
                this.queryParams = {
                    toUserId: null,
                    btime: null,
                    etime: null,
                    source: null,
                    type: null,
                };
                this.page = {
                    total: 0,
                    current: 1,
                    pageSize: 10
                };
                this.storageProductChanges = [];
                this.changeData = {
                    source1: 0,
                    source2: 0,
                    source3: 0,
                    source4: 0,
                    source5: 0,
                    source6: 0,
                };
            }

        },
        cancel: function() {
            this.$emit("ok")
        }
    }
}
</script>